<template>
	<uni-popup type="bottom" ref="history">
		<view class="history">
			<div class="header">
				<img @click="close" src="../static/close.svg" class="close-icon" alt="" srcset="">
				<text class="header-title">历史场次</text>
			</div>
			<div class="popup-container">
				<div class="history-list" v-for="item in recordList" :key="item.id" @click="jumpDetail(item.id)">
					<div class="history-left">
						<div class="history-room-name">{{item.roomName}}</div>
						<div class="history-room-date">{{parseTime(item.createTime,"{y}-{m}-{d}")}}</div>
					</div>
					<div class="history-right">
						<div class="avatar-box" v-for="z in item.partners" :key="z.id">
							<img :src="z.avatar" class="avatar" alt="" srcset="">
						</div>

					</div>
				</div>
				<uni-load-more :status="status" :content-text="contentText" @clickLoadMore="getData()"></uni-load-more>

			</div>
		</view>
	</uni-popup>
</template>

<script>
	import {
		historyRecord
	} from '../api/room.js'
	export default {
		name: "HistoryPopup",
		data() {
			return {
				pageParam: {
					pageNo: 1,
					pageSize: 10
				},
				contentText: {
					contentdown: '点击加载更多',
					contentrefresh: '加载中',
					contentnomore: '暂无更多~'
				},
				status: 'more',
				recordList: []
			};
		},
		created() {
			this.getData()
		},
		methods: {
			jumpDetail(roomId) {
				this.$emit("onDetail", roomId)
			},
			open() {
				this.$refs.history.open()
			},
			close() {
				this.$refs.history.close()
			},
			getData() {
				if (this.status !== 'noMore') {
					historyRecord(Object.assign(this.pageParam)).then(result => {


						this.recordList = this.recordList.concat(result.data.list)
						if (result.data.list >= this.pageParam.pageSize) {
							this.pageParam.pageNo++;
						} else {
							this.status = 'noMore'
						}


					})
				}

			},
		}
	}
</script>

<style scoped lang="scss">
	.history::after {
		display: table;
		content: "";
		clear: both;
	}

	.history {
		background-color: white;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		padding-top: 24upx;

		.header {
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;


			.header-title {
				font-size: 30upx;
				font-weight: bolder;
			}

			.close-icon {
				width: 40upx;
				height: 40upx;
				position: absolute;
				left: 24upx;
				top: 20upx;
			}

		}

		.popup-container {
			height: 720upx;
			margin-bottom: 32upx;
			overflow-y: auto;
			background-color: $uni-color-second;
			padding-top: 16upx;

			.history-list {
				align-items: center;
				background-color: #fff;
				border-radius: 16upx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 16upx;

				padding: 16upx 32upx;
				margin-left: 40upx;
				margin-right: 40upx;

				.history-room-name {
					color: #222;
					font-size: 28upx;
					font-weight: 600
				}

				.history-room-date {
					color: #616162;
					font-size: 24upx
				}

				.history-right {
					align-items: center;
					display: flex;
					justify-content: flex-end;
					width: 50%;
					position: relative;
					margin-right: 32upx;

					.avatar-box {
						align-items: center;
						border-radius: 100%;
						background-color: white;
						box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
						display: flex;
						justify-content: center;
						margin-right: -30upx;
					}

					.avatar {
						border-radius: 100%;
						font-size: 24upx;
						height: 60upx;
						width: 60upx
					}

				}

			}

		}

	}
</style>